<template>
	<view class="detail-container">
		<view class="detail-head" :style="{ paddingTop: barHeight + 'rpx' }">
			<view class="head-title">
				<image src="@/static/img/arr.png" mode="" @click="goto"></image>
				<text>职位详情</text>
			</view>
			<view class="head-gw">
				<view class="gw-title">{{ data.info.appPublishPosition.positionName }}</view>
				<view class="gw-money">{{ data.info.money }}</view>
				<view class="gw-border">
					<view class="border-item">{{ setName(data.info.appPublishPosition.workType) }}</view>
					<view class="border-item">{{ setName1(data.info.appPublishPosition.workAddressType) }}</view>
				</view>
				<view class="gw-type">
					<view class="type-xs" v-if="data.info.appPublishPosition.workType === 'PART_TIME_JOB'">
						<view class="xs-time">工作量: {{ data.info.appPublishPosition.workDays }}
						{{ (data.info.appPublishPosition.unitText && data.info.appPublishPosition.unitText != '')? data.info.appPublishPosition.unitText : '-' }}
						</view>
						<view class="xs-js">结算方式: {{ setFs(data.info.appPublishPosition.salarySettleType) }}</view>
					</view>
					<view class="type-xx" v-else @click="openMap">
						<image src="@/static/img/common/map.png" mode=""></image>
						<view class="map-title">{{ data.info.appPublishPosition.workAddress ? data.info.appPublishPosition.workAddress : '无' }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="detail-yq-box">
			<view class="detail-yq">
				<view class="yq-top">
					<view class="top-title">任职要求</view>
					<view class="top-desc">
						最低学历  {{ setXl(data.info.appPublishPosition.requireEdu) }} <br>年龄范围   {{ data.info?.appPublishPosition?.ageMin ? data.info.age : '不限' }}<br> 技能/特长：{{ data.info.appPublishPosition.requireSkill }} <br>工作时间：{{ data.info?.appPublishPosition?.startWorkDate ? data.info.time : '不限' }}
					</view>
				</view>
				<view class="yq-bt">
					<view class="bt-title">工作要求</view>
					<view class="bt-desc">{{ data.info.appPublishPosition.workPositionDesc }}</view>
				</view>
			</view>
			<view class="detail-rs">
				<image :src="httpUrl+'/app/file/viewFile?fileId='+data.info.appUser.avatarId" mode="aspectFill"></image>
				<view class="rs-info">
					<view class="info-title">
						<view class="name">{{ data.info.appUser.userName }}</view>
						<view class="rz">·{{ data.info.appUser.verifyState.name }}</view>
					</view>
					<view class="info-gs">{{ data.info.appPublishPosition.corporateName }}</view>
				</view>
			</view>
		</view>
		<view class="btn">
			<button class="btns" @click="jumpCate">立即沟通</button>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getStatusBarHeight } from '@/utils/common/common.js'
import api from '@/utils/api/recruit.js'
import { convertToK } from '@/utils/common/common.js'
const barHeight = ref(null)	
onLoad(res => {
	console.log(getApp());
	if(res.data){
		let obj = JSON.parse(res.data)
		// console.log(obj, '===');
		data.list = obj
		// data.info =  JSON.parse(JSON.stringify(obj))
		// data.info.time = `${data.info.startWorkDate} - ${data.info.endWorkDate}`
		// data.info.age = `${data.info.ageMin}岁 - ${data.info.ageMax}岁`
	}
	barHeight.value = getStatusBarHeight()
})
onMounted(_ => {
	 getDetail()
})
const httpUrl = getApp().globalData.baseUrl
// 数据
const data = reactive({
	info: {},
	list: { title: '视频剪辑师', money: '4K-5K', border: [{ name: '线上' }, { name: '兼职' }], type: '0', time: '3', fs: '日结' }
})
// 查询详情
const getDetail = async _ => {
	const res = await api.viewPublishPosition(data.list.id)
	data.info = res.data
	data.info.time = `${data.info.appPublishPosition.startWorkDate} - ${data.info.appPublishPosition.endWorkDate}`
	data.info.age = `${data.info.appPublishPosition.ageMin}岁 - ${data.info.appPublishPosition.ageMax}岁`
	data.info.money = `${ convertToK(data.info.appPublishPosition.salaryMin)} - ${convertToK(data.info.appPublishPosition.salaryMax)}`
}
// 打开地图
const openMap = _ => {
	// uni.getLocation({
	// 	type: 'gcj02', //返回可以用于uni.openLocation的经纬度
	// 	success: function (res) {
	// 		const latitude = res.latitude;
	// 		const longitude = res.longitude;
	// 		uni.openLocation({
	// 			latitude: latitude,
	// 			longitude: longitude,
	// 			name: data.list.workAddress,
	// 			success: function () {
	// 				console.log('success');
	// 			}
	// 		});
	// 	}
	// });
}
const setName = (positionName) => {
	// 根据 positionName 返回不同的文字
	switch (positionName) {
		case 'FULL_TIME':
			return '全职';
		case 'PART_TIME_JOB':
			return '兼职';
		default:
			return '未知';
	}
}
const setName1 = (positionName) => {
	// 根据 positionName 返回不同的文字
	switch (positionName) {
		case 'OFFLINE':
			return '线下';
		case 'ONLINE':
			return '线上';
		default:
			return '未知';
	}
}
const setFs = (positionName) => {
	// 根据 positionName 返回不同的文字
	switch (positionName) {
		case 'SINGLE_SETTLEMENT':
			return '单结';
		case 'DAILY_SETTLEMENT':
			return '日结';
		case 'MONTHLY_SETTLEMENT':
			return '月结';
		default:
			return '未知';
	}
}
// 学历
const setXl = (positionName) => {
	console.log(positionName);
	// 根据 positionName 返回不同的文字
	switch (positionName) {
		case 'NONE':
			return '不限';
		case 'PRIMARY_SCHOOL':
			return '小学';
		case 'JUNIOR_HIGH_SCHOOL':
			return '初中';
		case 'HIGH_SCHOOL':
			return '高中/中专/技校';
		case 'JUNIOR_COLLEGE':
			return '大专';
		case 'UNDERGRADUATE':
			return '本科';
		case 'GRADUATE_STUDENT':
			return '研究生';
		case 'DOCTOR':
			return '博士';
		case 'PROFESSOR':
			return '教授/专家';
		default:
			return '未知';
	}
}
const  getLocationByAddress = (address) => {
  const apiKey = '1ec5d267c293ac15e701b0ce4a09114d'; // 替换为你的高德API Key
  const url = `https://restapi.amap.com/v3/geocode/geo?address=${encodeURIComponent(address)}&key=${apiKey}`;

  return new Promise((resolve, reject) => {
    uni.request({
      url: url,
      method: 'GET',
      success: (res) => {
        if (res.data.status === '1' && res.data.geocodes && res.data.geocodes.length > 0) {
					console.log(res);
          const location = res.data.geocodes[0].location.split(',');
          const latitude = parseFloat(location[1]); // 纬度
          const longitude = parseFloat(location[0]); // 经度
          resolve({ latitude, longitude });
        } else {
          reject('未找到该地址的经纬度');
        }
      },
      fail: (err) => {
        reject('请求失败');
      }
    });
  });
}
// 返回
const goto = _ => uni.navigateBack()
// 立即沟通
const jumpCate = async _ => {
	await getApp().globalData.getUserInfo()
	// let id = `C2C${data.info.id}`
	let id = data.info.appPublishPosition.publishUserId
	let ids = `C2C${id}`
	let zId = data.info.appPublishPosition.id
	uni.navigateTo({
		// url:`/pages/TUIKit/components/TUIChat/index?conversationID=${data.list.id}&userId=${item.userId}&trendsId=${item.userId}`
		url:`/pages/TUIKit/components/TUIChat/index?conversationID=${ids}&userId=${id}&areaType=${'position'}&zId=${zId}&messageType=${'job'}`
	})
}
</script>

<style lang="scss" scoped>
	#app{
		background: #F4F6FA;
	}
.detail-container{
	width: 100%;
	height: 100vh;
	box-sizing: border-box;
	background: #F4F6FA;
	overflow: auto;
	// pa
	.detail-head{
		width: 100%;
		// height: 431rpx;
		background: url('@/static/img/common/zgzbgs.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		padding: 0 24rpx;
		box-sizing: border-box;
		.head-title{
			width: 750rpx;
			height: 89rpx;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
      padding: 0 32rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			image{
				width: 36rpx;
				height: 36rpx;
			}
			text{
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 32rpx;
				color: #333333;
				line-height: 48rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
				margin-left: 244rpx;
			}
		}
		.head-gw{
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			padding: 24rpx;
			box-sizing: border-box;
			margin-top: 34rpx;
			.gw-title{
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 42rpx;
				color: #262626;
				line-height: 64rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
			.gw-money{
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 32rpx;
				color: #6B64D3;
				line-height: 48rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-top: 8rpx;
			}
			.gw-border{
				margin-top: 16rpx;
				display: flex;
				align-items: center;
				.border-item{
					padding: 6rpx 16rpx;
					box-sizing: border-box;
					background: #F4F6FA;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 24rpx;
					color: #8C8C8C;
					line-height: 36rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					margin-right: 12rpx;
				}
			}
			.gw-type{
				margin-top: 24rpx;
				.type-xs{
					background: #E4E2FC;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					border: 1rpx solid #6B64D3;
					padding: 12rpx 24rpx;
					box-sizing: border-box;
					.xs-time{
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 28rpx;
						color: #6B64D3;
						line-height: 42rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
					.xs-js{
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 28rpx;
						color: #6B64D3;
						line-height: 42rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						margin-top: 12rpx;
					}
				}
				.type-xx{
					padding: 12rpx 24rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					background: #E4E2FC;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					border: 1rpx solid #6B64D3;
					image{
						width: 32rpx;
						height: 32rpx;
						margin-right: 12rpx;
					}
					.map-title{
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 28rpx;
						color: #6B64D3;
						line-height: 42rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
				}
			}
		}
	}
	.detail-yq-box{
		padding: 24rpx;
		box-sizing: border-box;
			padding-bottom: 180rpx;
		// background: #FFFFFF;
		.detail-yq{
			padding: 24rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin-top: 32rpx;
			.yq-top{
				.top-title{
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 36rpx;
					color: #262626;
					line-height: 54rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
				.yq-desc{
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 28rpx;
					color: #262626;
					line-height: 42rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					margin-top: 16rpx;
				}
			}
			.yq-bt{
				margin-top: 24rpx;
				.bt-title{
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 36rpx;
					color: #262626;
					line-height: 54rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
				.bt-desc{
					margin-top: 16rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 28rpx;
					color: #262626;
					line-height: 42rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
			}
		}
		.detail-rs{
			padding: 24rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			background: #fff;
			margin-top: 32rpx;
			border-radius: 16rpx;
			image{
				width: 128rpx;
				height: 128rpx;
				border-radius: 50%;
			}
			.rs-info{
				margin-left: 16rpx;
				flex: 1;
				width: 80%;
				.info-title{
					display: flex;
					align-items: center;
					.name{
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 42rpx;
						color: #262626;
						line-height: 64rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					.rz{
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 28rpx;
						color: #000000;
						line-height: 42rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						margin-left: 12rpx;
					}
				}
				.info-gs{
					margin-top: 8rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 32rpx;
					color: #8C8C8C;
					line-height: 48rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
			}
		}
	}
	.btn{
		position: fixed;
		bottom: 0;
		left: 0;
		height: 180rpx;
		padding: 24rpx;
		box-sizing: border-box;
		background: #fff;
		width: 100%;
		display: flex;
		.btns{
			width: 640rpx;
			height: 88rpx;
			background: #6B64D3;
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			color: #fff;
		}
	}
	// .btn{
	// 	// width: 750rpx;
	// 	// height: 112rpx;
	// 	// padding: 12rpx 0;
	// 	padding-bottom: 40rpx;
	// 	padding-top: 10rpx;
	// 	box-sizing: border-box;
	// 	background: #FFFFFF;
	// 	border-radius: 0rpx 0rpx 0rpx 0rpx;
	// 	.btns{
	// 		width: 640rpx;
	// 		height: 88rpx;
	// 		background: #6B64D3;
	// 		border-radius: 44rpx 44rpx 44rpx 44rpx;
	// 		color: #fff;
	// 	}
	// }

}
</style>
